<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
    <style>
        #box {
            clear: both;
            overflow: hidden;
        }
        
        #box div {
            width: 50px;
            height: 50px;
            background-color: #333;
            float: left;
            margin: 20px 5px;
            text-align: center;
            line-height: 50px;
            font-size: 28px;
            color: #fff;
        }
        
        #last {
            clear: right;
        }
        
        button {
            display: block;
        }
    </style>
</head>

<body>
    <h1>距离双11还剩</h1>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <br>
    <br>
    <div>
        <button>停止计时</button>
    </div>

    <br>
    <br>
    <form action="">
        <input type="text">
        <input type="button" value="发送">
    </form>

</body>

<script>
    $(function() {
        function counttimes() {
            var nows = new Date
            var endtime = new Date(2024, 11, 11)
            var times = endtime - nows;
            //计算天数
            var days = parseInt(times / 1000 / 60 / 60 / 24)
                //计算小时
            var hours = parseInt(times / 1000 / 60 / 60 % 24)
                //计算分钟
            var minuts = parseInt(times / 1000 / 60 % 60)
                //计算秒数
            var seconds = parseInt(times / 1000 % 60)

            hours = hours < 10 ? '0' + hours : hours
            minuts = minuts < 10 ? '0' + minuts : minuts
            seconds = seconds < 10 ? '0' + seconds : seconds
            $("div").eq(1).html(days);
            $("div").eq(2).html(hours);
            $("div").eq(3).html(minuts);
            $("div").eq(4).html(seconds)
        }
        counttimes();
        var time = setInterval(counttimes, 1000);
        $("button").on("click", function() {
            clearInterval(time);
        })
        var t = 10;
        $("input").eq(1).on("click", function() {
            $(this).prop("disabled", true)
            var time2 = setInterval(function() {
                if (t == 0) {
                    clearInterval(time2);
                    $("input").eq(1).prop("disabled", false);
                    $("input").eq(1).val("发送");
                    t = 10;
                } else {
                    $("input").eq(1).val("还剩" + t + "秒");
                    t--;
                }
            }, 1000)
            $("input").eq(0).val("");
        })
    })
</script>

</html>